<template>
    <div class="share-layout">
      <div v-if="isSearch" class="search-content">
        <dialog-search-view @callback="onSearch"/>
        <ul class="project-list">
          <li class="list-item" v-for="(d,index) in searchList" :key="index" @click="onDetail(d)">
            <div class="left">
              <img :src="d.suffix ? require('../../assets/image/file.png') : require('../../assets/image/folder.png')" alt="" class="type">
              <div class="item-content">
                <p class="content-title">{{d.suffix ? d.name.replace('.' + d.suffix, ''): d.name}}</p>
                <p class="desc">
                  发布人: <span style="margin-right: 10px;">{{d.userName}}</span> 项目: <span style="margin-right: 10px;">{{d.projectName}}</span><span>{{d.createTime}}</span>
                </p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div v-else>
        <header-view>
            <div class="icon"></div>
            <div class="title" @click.stop="isShowMenu = true">
                <div class="title-text">{{shareTitle}}</div>
                <img :src="!isShowMenu? require('../../assets/image/arrow-down.png'):require('../../assets/image/arrow-up.png')" alt="" class="arrow">
            </div>
            <img src="../../assets/image/search.png" alt="" class="icon" @click.stop="isSearch = true">
        </header-view>
        <div class="content">
            <ul class="project-list">
                <li class="list-item" v-for="(d,index) in shareList" :key="index" @click="onDetail(d)">
                    <div class="left">
                        <img :src="d.suffix ? require('../../assets/image/file.png') : require('../../assets/image/folder.png')" alt="" class="type">
                        <div class="item-content">
                            <p class="content-title">{{d.suffix ? d.name.replace('.' + d.suffix, ''): d.name}}</p>
                            <p class="desc">
                                发布人: <span style="margin-right: 10px;">{{d.userName}}</span> 项目: <span style="margin-right: 10px;">{{d.projectName}}</span><span>{{d.createTime}}</span>
                            </p>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="drop-layout" v-if="isShowMenu">
                <dialog-drop-view :data="shareMenu" :type="2"/>
            </div>
        </div>
      </div>
    </div>
</template>

<script>
    import HeaderView from '../common/HeaderView';
    import DialogDropView from '../common/DialogDropView';
    import DialogSearchView from '../common/SearchView';

    import { getShareToMy, getMyShare } from '../../api/share'

    export default {
        name: 'Share',
        components: {HeaderView,DialogDropView,DialogSearchView},
        data() {
            return {
                shareList: [],
                isShowMenu: false,
                shareMenu: [
                    {
                        title: '分享给我的',
                        icon1: require('../../assets/image/share-me.png'),
                        icon2: require('../../assets/image/share-me-checked.png'),
                        checked: false,
                    },
                    {
                        title: '我分享的',
                        icon1: require('../../assets/image/share-to.png'),
                        icon2: require('../../assets/image/share-to-checked.png'),
                        checked: false,
                    },
                    // {
                    //     title: '全部',
                    //     icon1: require('../../assets/image/all.png'),
                    //     icon2: require('../../assets/image/all-checked.png'),
                    //     checked: false,
                    // }
                ],
                shareTitle: '我分享的',
                name: '',
                pageSize: 20,
                pageNo: 1,
                isSearch: false,
                searchList: [],
            }
        },
        mounted() {
            this.getMyShare()
            document.addEventListener('click', () => {
                if(this.isShowDrop)
                    this.isShowDrop = false;
                if(this.isShowMenu)
                    this.isShowMenu = false;
                if(this.isSearch)
                    this.isSearch = false;
            });
        },
        methods: {
            onSearch(name) {
              console.log(this.shareTitle)
              if(this.shareTitle === '我分享的') {
                getMyShare({
                  name,
                  pageSize: this.pageSize,
                  pageNo: this.pageNo
                })
                    .then(result => {
                      const { data } = result
                      // console.log(data)
                      this.searchList = data.dataList
                    })
                    .catch(err => {
                      console.log(err)
                    })
              }else {
                getShareToMy({
                  name,
                  pageSize: this.pageSize,
                  pageNo: this.pageNo
                })
                    .then(result => {
                      const { data } = result
                      // console.log(data)
                      this.searchList = data.dataList
                    })
                    .catch(err => {
                      console.log(err)
                    })
              }
            },
            //分享给我的
            getShareToMy() {
                getShareToMy({
                    name: '',
                    pageSize: this.pageSize,
                    pageNo: this.pageNo
                })
                    .then(result => {
                        const { data } = result
                        // console.log(data)
                        this.shareList = data.dataList
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            getMyShare() {
                getMyShare({
                    name: '',
                    pageSize: this.pageSize,
                    pageNo: this.pageNo
                })
                    .then(result => {
                        const { data } = result
                        // console.log(data)
                        this.shareList = data.dataList
                    })
                    .catch(err => {
                        console.log(err)
                    })
            },
            onDetail(d) {
                this.$router.push({name: 'fileContent', params: {info: d, type: 'share'}})
            }
        },

    }
</script>

<style scoped>
    .title {
        flex: 1;
    }
    .search-content {
      background: #F5F8FB;
      min-height:82vh;
      margin-top: 135px;
    }
    .content {
        background: #F5F8FB;
        min-height: 80vh;
        /*overflow-y: scroll;*/
        margin-top: 135px;
    }
    .project-list {
        padding: 20px 25px 0;
    }
    .list-item {
        /*width: 700px;*/
        height: 130px;
        background: #FFFFFF;
        box-shadow: 0 6px 9px 0 rgba(0, 120, 255, 0.05);
        border-radius: 30px;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 6px;
    }
    .list-item .left {
        display: flex;
        text-align: left;
        align-items: center;
    }
    .list-item .left .type {
        height: 50px;
        margin-right: 20px;
    }
    .content-title {
        font-size: 26px;
        color: #191919;
        padding-bottom: 20px;
    }
    .desc {
        font-size: 18px;
        color: #C8C8C8;
    }
    .drop-layout {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: rgba(0,0,0,.3);
        z-index: 9999;
    }

</style>